<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<article class="ware-contents">
		<!--form-->
		<form class="layui-form">
			<!--ware-content-input-->
			<section class="ware-c-input">
				<dl>
				    <dt>商品名称<i class="must">*</i></dt>
				    <dd><input type="text" name="goods_name" lay-verify="required" lay-verType="tips" placeholder="请输入商品名称，不得超过10个汉字" maxlength="10" autocomplete="off" class="layui-input"></dd>
			  	</dl>
			  	<dl>
				    <dt>积分商品分类<i class="must">*</i></dt>
				    <dd>
				    	<select name="cate_id" lay-filter="ware-cate" id="Select" lay-verify="classify">
					        <option value="">选择积分商品分类</option>
					        <option value="0">分类1</option>
					        <option value="1">分类1</option>
					        <option value="2">分类3</option>
				      	</select>
				    </dd>
			  	</dl>
			  	
			  	<dl>
				    <dt>原价<i class="must">*</i></dt>
				    <dd><input type="text" name="price" lay-verify="num|required" placeholder="请输入商品价格" lay-verType="tips" autocomplete="off" class="layui-input"></dd>
			  	</dl>
			  	<dl>
				    <dt>商品描述</dt>
				    <dd><input type="text" name="describe" placeholder="请输入商品描述信息" autocomplete="off" class="layui-input"></dd>
			  	</dl>
			  	<dl>
				    <dt>需要积分<i class="must">*</i></dt>
				    <dd><input type="text" name="integral" lay-verify="num|required" placeholder="请设置需要兑换产品的积分值" lay-verType="tips" autocomplete="off" class="layui-input"></dd>
			  	</dl>
			  	
			  	<dl>
				    <dt>指定会员等级</dt>
				    <dd>
				    	<select name="level" lay-filter="ware-cate" id="Select">
					        <option value="">请选择会员等级</option>
					        <option value="0">普通会员</option>
					        <option value="1">中级会员</option>
					        <option value="2">至尊会员</option>
					        <option value="3">初级会员</option>
					        <option value="4">高级会员</option>
				      	</select>
				      	<code>*如果没有选择会员等级，默认为所有会员等级都可以兑换的哦</code>
				    </dd>
				    
			  	</dl>
			  	<dl>
				    <dt>库存<i class="must">*</i></dt>
				    <dd><input type="text" name="stock" lay-verify="num|required"  placeholder="请输入库存信息" lay-verType="tips" autocomplete="off" class="layui-input"></dd>
			  	</dl>
			  	<dl>
				    <dt>虚拟销量</dt>
				    <dd><input type="text" name="sales" lay-verify="num"  placeholder="请设置虚拟销量" lay-verType="tips" autocomplete="off" class="layui-input"></dd>
			  	</dl>
			  	<dl>
				    <dt>添加商品</dt>
			  		<dd class="marke-input-img"><input type="text" placeholder="图片尺寸 200*200" class="marke-img layui-input layui-disabled" disabled value=""/><span id="pay">上传</span><span class="imgview">预览</span><span class="imgdel">删除</span><br /><code>建议上传尺寸200*200</code></dd>
			  	</dl>
			</section>
			<!--/ware-content-input-->
			<!--ware-c-text-->
			<div class="ware-c-text">
				<h4>商品内容</h4>
				<div class="ware-c-txt">
					<textarea id="ware-text" name="ware-area"></textarea>
				</div>
			</div>
			<!--/ware-c-text-->
			<!--ware-state-->
			<div class="ware-state">
			      <input type="radio" name="state" value="上架" title="上架" checked>
			      <input type="radio" name="state" value="下架" title="下架" >
			</div>
			<!--/ware-state-->
			<!--submit-->
			<div class="ware-submit">
				<button class="submit" lay-submit lay-filter="Submit" lay-verify="editcontent">提交</button>
			</div>
			
			<!--/submit-->
		</form>
		<!--/form-->
	</article>
	<!--js-->
	<aside>
		<script type="text/javascript" src="../layui/layui.js" ></script>
		<script type="text/javascript">
			layui.use(['form','jquery','upload','layedit'],function(){
				var form=layui.form;
				var $=layui.jquery;
				var upload=layui.upload;
				var layedit=layui.layedit;
  
				//图标上传
				upload.render({
				    elem: '#ware-drag'
				    ,url: '/'
				    ,size:2000
				    ,done: function(res){
				      console.log(res)
				    }
				  })
				
				
				//富文本编辑器
				var index=layedit.build('ware-text',{
					 height: 200,
					 tool: [
						  'strong' //加粗
						  ,'italic' //斜体
						  ,'underline' //下划线
						  ,'del' //删除线
						  ,'|' //分割线
						  ,'left' //左对齐
						  ,'center' //居中对齐
						  ,'right' //右对齐
						  ,'link' //超链接
						  ,'unlink' //清除链接
						  ,'face' //表情
						]
				})
				
				
				//表单验证
				form.verify({
			  	num: [                 //判断是否为数字
				    /^[0-9]*$/
				    ,'请输入一个正确的数字'   
				]
				,classify:function(){   //判断是否选择分类
					var val=$('#Select').val()
					if(val==""){
						return '您尚未选则积分商品分类，暂时还不能提交'
					}else{
						return false
					}
					}
				, editcontent:function () {
			            layedit.sync(index); //同步编辑内容到textarea #10line
			       }
		 		})
		 	 	//表单提交
				form.on('submit(Submit)', function(data){
					console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
					$.ajax({
			            url: '/',
			            data: data.field,
			            type: 'post',
			            datatype: 'json',
			            success: function (res) {
				                if (res.code == 1) {
				                	layer.msg(res.msg);
				                    return;
				                }
				            }
				        });
					  
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
				
				
				
				 //图片上传
		        upload.render({
				    elem: '#pay' //绑定元素
				    ,url: 'https://api-develop.zhihuiyouzhan.com.cn/index.php/system/upload/upload?path=merchant.integral&token={:get_api_token()}' //上传接口
				    ,done: function(res){
				      //上传完毕回调
				      if(res.code==0){
				      	$('.marke-img').eq(0).val(res.data.domain+res.data.list[0])
				      }else{
				      	layer.msg(res.msg,{icon: 2})
				      }
				      
				    }
				    ,error: function(){
				      //请求异常回调
				       layer.msg('数据请求异常',{icon: 2})
				    }
				 });
				 
				  //预览
		        $('.imgview').click(function () {
		        	var img=$(this).parent().find('.marke-img')
			        var imgVal =img.val()
			        if(imgVal == '') {
			        	layer.msg('没有图片可以预览',{icon:2})
			        	return false;
			        }
			        var imgView = "<img style='width:100%;height:100%' src="+imgVal+">";
			        	layer.open({
				            title: '图片预览',
				            area:'750px',
				            content: imgView,
				            shadeClose:true
			       		 });
		   		 })	
		        //删除
		         $('.imgdel').click(function () {
		         	var img=$(this).parent().find('.marke-img')
		       		 if( img.val()==''){
		       		 		layer.msg('没有图片可以删除',{icon:2})
		       		 }else{
		       		 		img.val('')
		       		 }
		    	});

				
				})
			
				
		</script>
	</aside>
	<!--/js-->
	
	
	
	
	
	
	
	
</body>
</html>